<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>多级列表</title>
    <script type="text/javascript">
        let schools = [];

        function init() {
            let xhr = new XMLHttpRequest();
            xhr.open("get", "./../asset/data.json", true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let txt = xhr.responseText;
                    schools = JSON.parse(txt);
                    let school_college = document.getElementById("college");
                    let school_major = document.getElementById("major");
                    for (let i = 0; i < schools.length; i++) {
                        school_college.options[i] = new Option(schools[i].name);
                    }
                    for (let i = 0; i < schools[0].major.length; i++) {
                        school_major.options[i] = new Option(schools[0].major[i]);
                    }
                }
            }
        }
    </script>
</head>
<body onload="init()">
<label for="college">请选择：</label><select id="college" onclick="fun()"></select>学院
<label for="major">学院</label><select id="major"></select>专业
<script type="text/javascript">
    function fun() {
        let school_college = document.getElementById("college");
        let school_major = document.getElementById("major");
        let index = school_college.selectedIndex;
        /* 清空原来的专业列表 */
        school_major.length = 0;
        for (let i = 0; i < schools[index].major.length; i++) {
            school_major.options[i] = new Option(schools[index].major[i])
        }
    }
</script>
</body>
</html>